<template>
	<view class="evaluate_list_box">
		<nav-bar title="商品评论" bgColor="#f5f5f5"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
            <view class="evaluate_list" v-for="(item, index) of comments" :key="index">
                <view class="image_box"><image :src="item.userHeadImg" mode="aspectFill"></image></view>
                <view class="info_box">
                    <view class="name_box">
                        <text class="name">{{ item.userNickName }}</text>
                        <text class="time">{{ item.createTimeStr }}</text>
                    </view>
                    <view class="score_box">
                        <view class="stars" v-for="(childItem, childIndex) in 5" :key="childIndex">
                            <image v-if="item.score >= childItem" src="../../../static/icon/evaluation_star1.png" mode="aspectFill"></image>
                            <image v-else src="../../../static/icon/evaluation_star2.png" mode="aspectFill"></image>
                        </view>
                        <text class="score">{{ item.score.toFixed(1) }}分</text>
                    </view>
                    <view class="content_box">{{ item.content }}</view>
                    <view class="picture_box" v-if="item.imgs.length > 0">
                        <image
                            v-for="(imgsItem, imgsIndex) of item.imgs"
                            :key="imgsIndex"
                            @click="onPreviewImage(imgsItem, item.imgs)"
                            :src="imgsItem"
                            mode="aspectFill"
                        ></image>
                    </view>
                </view>
            </view>
        </mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	data() {
		return {
			downOption: {
				auto: false //是否在初始化后,自动执行downCallback; 默认true
			},
			objId: '',
			comments: []
		};
	},
	//第一次加载
	onLoad(e) {
		this.objId = e.objId;
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		// 图片预览的方法
		onPreviewImage(currentUrl, ulsList) {
			uni.previewImage({
				current: currentUrl,
				urls: ulsList,
				loop: true,
				indicator: 'default'
			});
		},
        /*下拉刷新的回调 */
        downCallback() {
        	//联网加载数据
        	this.loadData(1);
        },
        /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
        upCallback(page) {
        	//联网加载数据
        	this.loadData(page.num);
        },
        loadData(pageNo) {
            let httpData = {
                pageNo: pageNo,
                pageSize: 15,
                objId: this.objId,
                goodsPackage: false
            };
            this.$http
            	.post('api/mall/goods/comment/v1/list', httpData,{
            		load:false
            	}).then(res => {
            		uni.stopPullDownRefresh();
            		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
            		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
            		
            		if (pageNo == 1) {
            			this.comments = res.data;
            		} else {
            			this.comments = this.comments.concat(res.data);
            		}
            	}).catch(() => {
            		//联网失败, 结束加载
            		this.mescroll.endErr();
            	});
        },
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.evaluate_list {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background-color: #ffffff;
	border-bottom: 1rpx solid #efefef;
	.image_box {
		> image {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}

	.info_box {
		width: 100%;
		.name_box {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			.name {
				font-size: 26rpx;
				color: #333333;
			}
			.time {
				font-size: 24rpx;
				color: #999999;
			}
		}
		.score_box {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 19rpx;
			.stars {
				margin-right: 5rpx;
				image {
					width: 27rpx;
					height: 26rpx;
				}
			}
			.score {
				margin-left: 20rpx;
				font-size: 20rpx;
				color: #333333;
			}
		}
		.content_box {
			margin-top: 19rpx;
			font-size: 24rpx;
			color: #333333;
		}
		.picture_box {
			margin-top: 19rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			> image {
				width: 186rpx;
				height: 144rpx;
				border-radius: 4rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				&:nth-of-type(3n) {
					margin-right: 0;
				}
			}
		}
	}
}
</style>
